<template>
  <el-card class="categoryRank-card">
    <p>品类分布</p>
    <div class="categoryRank" ref="categoryRankRef"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "CategoryRank",
};
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const categoryRankRef = ref();
onMounted(() => {
  const myEcharts = echarts.init(categoryRankRef.value);
  const data = [
    { name: "粉面粥店", value: 55 },
    { name: "简餐便当", value: 45 },
    { name: "汉堡披萨", value: 67 },
    { name: "香锅冒菜", value: 60 },
    { name: "小吃炸串", value: 30 },
    { name: "地方菜系", value: 80 },
    { name: "轻食简餐", value: 36 }
  ];
  const option = {
    title: {
      text: "累计订单",
      textStyle: {
        fontSize: 14,
      },

      subtext: "406",
      subtextStyle: {
        fontSize: 20,
      },
      left: "center",
      top: "middle",
    },
    series: [
      {
        name: "品牌分布",
        type: "pie",
        data,
        radius: ["20%", "40%"],
      },
    ],
    tooltip: {
      show: true,
      formatter: "{a} <br />{b} <br /> 数量: {c} <br /> 百分比:{d}",
    },
    legend: {
      type: "plain",

      right: 20,
      top: "middle",
      orient: "vertical",
      formatter(name: string) {
        return `${name} | ${data.find((item) => item.name === name)?.value}`;
      },
    },
  };
  myEcharts.setOption(option);
});
</script>

<style scoped>
.categoryRank-card {
  margin-top: 20px;
}
.categoryRank {
  width: 100%;
  height: 400px;
}
</style>
<!-- 
    const option = {
    title: {
      text: "累计订单量",
      textStyle: {
        fontSize: 14,
      },
      subtext: "406",
      subtextStyle: {
        fontSize: 25,
      },
      left: "center",
      top: "42%",
    },
    series: [
      {
        name: "品类分布",
        type: "pie",
        data: [
        { name: "粉面粥店", value: 55 },
        { name: "简餐便当", value: 45 },
        { name: "汉堡披萨", value: 67 },
        { name: "香锅冒菜", value: 60 },
        { name: "小吃炸串", value: 30 },
        { name: "地方菜系", value: 80 },
        { name: "轻食简餐", value: 36 },
      ],
        radius: ["40%", "60%"],
      },
    ],
    tooltip: {
      formatter: "{a}<br /> {b}<br /> 数量：{c} <br />百分比：{d}",
    },
    legend: {
      top: "middle",
      right: 0,
      orient: "vertical",
      formatter(name: string) {
        return `${name} | ${data.find((item) => item.name === name)?.value}`;
      },
    },
  };
 -->
